<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>lichess - Sound Test Page</title>
    <style>
      html,
      body {
        font: 16px monospace;
        background: #000;
        color: #ebd488;
      }

      button {
        width: 100%;
      }
    </style>
    <meta content="noindex, nofollow" name="robots" />
  </head>

  <body data-asset-version="_av_">
    <h1>Sound Test Page</h1>
    <script>
      lichess = {
        load: new Promise(() => {}),
      };
      document.body.setAttribute('data-asset-url', `${location.protocol}//${location.host}`);
    </script>
    <script src="https://lichess1.org/assets/compiled/deps.min.js"></script>
    <script src="https://lichess1.org/assets/compiled/site.min.js"></script>
    <table class="common">
      <thead>
        <tr></tr>
      </thead>
      <tbody></tbody>
    </table>
    <br /><br />
    <hr />
    <br /><br />
    <table class="storm">
      <thead>
        <tr>
          Puzzle Storm
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      function playSound(set, name) {
        lichess.sound.changeSet(set);
        lichess.sound.play(name);
      }
      const soundSets = ['standard', 'piano', 'nes', 'sfx', 'futuristic', 'robot', 'lisp'];
      const basics = [
        'genericNotify',
        'move',
        'capture',
        'explosion',
        'lowTime',
        'victory',
        'defeat',
        'draw',
        'berserk',
        'check',
        'newChallenge',
        'newPM',
        'confirmation',
        'error',
        'practiceComplete',
        'practiceWrong',
        'tournament1st',
        'tournament2nd',
        'tournament3rd',
        'tournamentOther',
        ...[...Array(11).keys()].reverse().map(i => 'CountDown' + i),
      ];

      soundSets.forEach(s => {
        $('<th>').text(s).appendTo($('table.common thead tr'));
      });

      for (const name of basics) {
        var tr = $('<tr>').appendTo($('table.common tbody'));
        $.each(soundSets, function (i, soundSet) {
          var id = 'soundSet_' + soundSet;
          $('<td>')
            .append(
              $('<button>')
                .on('click', () => playSound(soundSet, name))
                .text(name)
            )
            .appendTo(tr);
        });
      }

      [
        ['good', 'lisp/PuzzleStormGood'],
        ['wrong', 'lisp/Error'],
        ['end', 'lisp/PuzzleStormEnd'],
      ].forEach(([name, sound]) => {
        lichess.sound.loadOggOrMp3(sound, `${lichess.sound.baseUrl}/${sound}`);
        var tr = $('<tr>').appendTo($('table.storm tbody'));
        $('<td>')
          .append(
            $('<button>')
              .on('click', () => lichess.sound.play(sound))
              .text(name)
          )
          .appendTo(tr);
      });
    </script>
  </body>
</html>
